<template>
  <div class="bodys">
    <div id="left">
      <a-avatar :size="81" :src="showList.imgUrl">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </div>
    <div id="middle">
      <router-link to="/user/userbody">
        <h2>{{ showList.name }}</h2>
      </router-link>
      <div>
        <a-row type="flex" justify="start">
          <a-col :span="4">
            <router-link to="/user/userothers">
              <span @click="show4">关注<RightOutlined /></span>
              <p>{{ showList.follows }}</p>
            </router-link>
          </a-col>
          <a-col :span="4">
            <router-link to="/user/userothers">
              <span @click="show5">粉丝<RightOutlined /></span>
              <p>{{ showList.fans }}</p>
            </router-link>
          </a-col>
          <a-col :span="4">
            <router-link to="/user/userbody">
              <span @click="show2">文章<RightOutlined /></span>
              <p>{{ showList.articles }}</p>
            </router-link>
          </a-col>
          <a-col :span="4">
            <span>获赞</span>
            <p>{{ showList.likes }}</p>
          </a-col>
        </a-row>
      </div>
    </div>
    <div id="right">
      <a-button
        type="primary"
        style="margin-bottom: 10px"
        ghost
        @click="doFollow"
      >
        关注
      </a-button>
      <a-button type="primary" ghost @click="doCommunicate()">私信</a-button>
    </div>
  </div>
</template>

<script>
import { UserOutlined, RightOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import VueEvent from "../../utils/event";
import { doFollows } from "../../api/users";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const showList = reactive({
      uid: "",
      name: "",
      follows: "",
      fans: "",
      articles: "",
      likes: "",
      imgUrl: "",
    });
    const router = useRouter();

    VueEvent.on("userTop", (e) => {
      showList.uid = e.uid;
      showList.name = e.name;
      showList.follows = e.follows;
      showList.fans = e.fans;
      showList.articles = e.articles;
      showList.likes = e.numOfLikes;
      showList.imgUrl = e.imgUrl;
    });

    const doCommunicate = () => {
      router.push({
        path: "/userInfo/messageBox",
        query: { uid: showList.uid, name: showList.name },
      });
    };

    const doFollow = () => {
      doFollows({
        url: "/users/doFollows",
        userid: showList.uid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const show2 = () => {
      VueEvent.emit("userBody2");
    };
    const show4 = () => {
      VueEvent.emit("userOthers1");
    };
    const show5 = () => {
      VueEvent.emit("userOthers2");
    };

    return {
      showList,
      show2,
      show4,
      show5,
      doFollow,
      doCommunicate,
    };
  },
  components: {
    UserOutlined,
    RightOutlined,
  },
});
</script>

<style scoped>
.bodys {
  height: 150px;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  /* background: chocolate; */
}
#left {
  padding: 20px 20px 0 0;
  margin: 0;
}
#middle {
  height: 150px;
  width: 70%;
  margin: 0;
  padding-top: 20px;
}
#right {
  padding-top: 20px;
}
</style>